<template>
    <div class="container">
        <div class="category animated bounceInLeft">
            <h2>[基础产品]G6 图可视化引擎</h2>
            <p class="desc">便捷的关系数据可视化引擎与图分析工具。</p>
            <div class="demo-wrap">
                <p v-for="item in demoList" :key="item.id" @click="toggleDemo(item)">{{ item.name }}</p>
            </div>
        </div>
        <div class="category animated bounceInRight">
            <h2>[扩展产品]Graphin 图的分析洞察</h2>
            <p class="desc">基于 G6 封装的图分析应用组件。</p>
            <div class="demo-wrap">

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
import useG6Demo from "@/hooks/useG6Demo.hook.ts"

export default defineComponent({
    name: "G6",
    setup() {
        const {demoList, toggleDemo} = useG6Demo()

        return {
            demoList, toggleDemo
        }
    }
})
</script>

<style scoped lang="less">
@import "~@/common/css/demo.style.less";
</style>
